<template>
    <div class="workOrderpie-style">
        <div class="second-box">
            <titleComponent title="工单整体情况"></titleComponent>
            <div class="ringWrap">
                <ringChart :interval="true"></ringChart>
            </div>
        </div>
        <div class="second-box">
            <titleComponent title="在途工单情况"></titleComponent>
            <div class="ringWrap">
                <div class="percentPieWrap" style="border-bottom: 1px #aaa dashed;border-right: 1px #aaa dashed;">
                    <percentPie :colorArr="'rgba(10,128,254'"></percentPie>
                    <div class="title">在途质差工单： 10个</div>
                </div>
                <div class="percentPieWrap" style="border-bottom: 1px #aaa dashed;">
                    <percentPie :colorArr="'rgba(116,198,248'"></percentPie>
                    <div class="title">在途无覆盖工单： 10个</div>
                </div>
                <div class="percentPieWrap" style="border-right: 1px #aaa dashed;">
                    <percentPie :colorArr="'rgba(255,117,114'"></percentPie>
                    <div class="title">在途端口扩容工单： 10个</div>
                </div>
                <div class="percentPieWrap">
                    <percentPie :colorArr="'rgba(255,169,66'"></percentPie>
                    <div class="title">在途政企工单： 10个</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import titleComponent from "./titleComponent";
    import ringChart from "./ringChart";
    import percentPie from "./percentPie";
    export default {
        name: "workOrderpie",
        components: {
            titleComponent,
            ringChart,
            percentPie
        }
    }
</script>

<style scoped lang="less">
.workOrderpie-style {
    position: absolute;
    width: 100%;
    height: 250px;
    .second-box {
        position: relative;
        float: left;
        overflow: hidden;
        width: 50%;
        height: 250px;
        .ringWrap {
            box-sizing: border-box;
            position: absolute;
            width: 100%;
            height: 210px;
            top: 40px;
            padding: 10px;
            padding-top: 0px;
            //background: #11b95c;
            .percentPieWrap {
                position: relative;
                box-sizing: border-box;
                width: 50%;
                height: 50%;
                float: left;
            }
            .title {
                position: absolute;
                width: 100%;
                text-align: center;
                bottom: 2px;
                color: rgba(0, 0, 0, 0.7);
                font-size: 14px;
            }
        }
    }
}
</style>
